<template>
  <div class="UploadLoad justifyAlignB">
    <el-dialog  v-dialogDrag   title="附件正在上传中" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false"  :before-close="handleClose">
      <div v-if="api !== 'getProgressSalary'" style="display: flex; align-items: center"><h4 class="justifyAlign">当前上传银行</h4><b>:</b>{{ params.salaCardBank | getbankFilter(that) }}</div>
      <div style="display: flex; align-items: center"><h4 class="justifyAlign">当前上传单位数</h4><b>:</b>{{ object && object.agencyCount ? object.agencyCount : '' }}</div>
      <div style="display: flex; align-items: center"><h4 class="justifyAlign">当前生成人数</h4><b>:</b>{{ object && object.personCount ? object.personCount : '' }}</div>
      <div style="display: flex; align-items: center"><h4 class="justifyAlign">当前生成金额</h4><b>:</b>{{ object && object.sumRealSalary ? object.sumRealSalary : '' }}</div>
      <div style="display: flex; align-items: center"><h4 class="justifyAlign">信息</h4><b>:</b><p style="width: 80%"
       v-loading="loading"
       element-loading-text="数据校验中..."
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
       >{{Message}}</p></div>
      <el-progress v-if="!loading" :percentage="num" />
    </el-dialog>
  </div>
</template>

<script>
import { makeSalaryDataAsync, getPaymentPercent } from '@/api/generateSalaryData/generateBankData'
export default {
  name: 'uploadLoadSalary',
  components: {},
  filters: {
    getbankFilter(value, that) {
      for (const key in that.agencyBankLists) {
        if (that.agencyBankLists[key].code == value) {
          return that.agencyBankLists[key].name
        }
      }
    }
  },
  props: {
    api: {
      type: String,
      default: function() {
        return ''
      }
    },
    params: {
      type: Object,
      default: function() {
        return {}
      }
    },
     object: {
      type: Object,
      default: function() {
        return {}
      }
    },
    agencyBankLists: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      that: this,
      dialogVisible: true,
      num: 0,
      timer: null,
      // object: {},
      Message: '',
      loading: true,
      guid: ''
    }
  },
  mounted() {
     this.getMessage()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getMessage() {
      let tmp = {
        "page": "1",
        "limit": "500",
        "flag": "all",
        "agencyIds": [],
        "menuid": this.params.menuid
      }
      this.params.agencySelected.split(',').forEach(element => {
        tmp.agencyIds.push(element)
      });
      makeSalaryDataAsync(tmp).then(res => {
          if (res.data && res.data.guid) {
            this.Message = res.data.message
            this.guid = res.data.guid
            this.loading = false
            this.timer = setInterval(this.getProgresss, 2000)
          }
      })
    },
    getProgresss() {
      let tmp = {
        "uuid": this.guid
      }
      getPaymentPercent(tmp).then(res => {
         if (res.data || res.data === 0) {     
           // 成功
           if (res.data.indexOf('S') !== -1) {
              this.$message({
              showClose: true,
              message: '上传成功',
              type: 'success',
              duration: 4000
              })
              clearInterval(this.timer)
              this.$emit('close', 1)
           }
           // 失败
           if (res.data.indexOf('F') !== -1) {
              this.$message({
              showClose: true,
              message: res.data,
              type: 'error',
              duration: 0
              })
              clearInterval(this.timer)
              this.$emit('close', 1)
           }
          this.num = Number(res.data * 100).toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
          //  this.num = res.data * 100
         } else{
            this.$message({
              showClose: true,
              message: '校验后无可生成支付的单位！',
              type: 'error',
              duration: 0
              })
            clearInterval(this.timer)
         }
      })
    },
    handleClose() {
      this.$emit('close', 1)
    }
  }
}
</script>
<style lang="scss">
    .justifyAlign{
        text-align-last:justify;

        text-align:justify;

        text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器

        width: 100px;
    }
    .justifyAlignB b{
      width:30px;
      text-align:center;
    }
</style>
